import React, { Component } from 'react';
import List from './List'
import Input from './Input'
class ToDoApp extends Component {
  componentWillMount() {
    let _this = this
    this.setState({
      list: ['你好', '你好吗？', '你， 好吗？'],
      newToDo: '',
      onInputChange: onInputChange,
      onInputSubmit: onInputSubmit
    });
   function onInputChange (event) {
      console.log('-----', event.target.value, _this)
      _this.setState({
        newToDo: event.target.value
      });
    };
   function onInputSubmit(event) {
      event.preventDefault();
      _this.setState((previousState) => ({
        list: [...previousState.list, previousState.newToDo],
        newToDo: ''
      }));
    };
  };
  render() {
    return (
      <div className="row">
        <div className="col-md-10 col-md-offset-1">
          <div className="panel panel-default">
            <div className="panel-body">
              <Input inputValue={this.state.newToDo} onChange={this.state.onInputChange} onSubmit={this.state.onInputSubmit}/>
              <h1>我的任务</h1>
              <hr/>
              <List listItems={this.state.list}/>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default ToDoApp;
